<template>
	<view class="tm-swiper " :class="[inline?'d-inline-block':'']">
		<swiper
		:style="{
			width:w_s + 'rpx',
			height:h_s + 'rpx'
		}"
		:vertical="vertical"
		:autoplay="autoplay"
		:circular="circular"
		:interval="interval"
		:duration="duration"
		:indicator-active-color='color_tmeme'
		:current="nowIndex"
		@change="change"
		>
			<swiper-item   :style="{
				width:w_s + 'rpx',
				height:h_s + 'rpx'
			}" v-for="(item,index) in dataList" :key="index">
				<view class="actvieMarginDh">
					<view class="actvieMarginDh-item" :class="[round_num>0?` round-${round_num} overflow`:'']">
						<image @click="itemClick(item)"
						:style="{
							height:h_s+'rpx',
							width:(w_s - margin_px)+'rpx'
						}"
						@load="imgload($event,index)" :src="item.url"></image>
					</view>
				</view>
			</swiper-item>
			
		</swiper>
		<view class="tm-swiper-dot " v-if="indicatorDots" :class="[dotDirection]">
			<block v-if="dotModel!='round'">
				<view @click="nowIndex =index" v-for="(item,index) in dataList" :key="index"
				class="tm-swiper-dot-item  flex-center  mx-8" 
				:class="[
					nowIndex==index?color_tmeme:'unactive',
					dotModel
					
				]" >
					<text v-if="dotModel==='number'" class="text-size-xs">{{index+1}}</text>
				</view>
			</block>
			<block v-if="dotModel=='round'">
				
				<view :class="[dotModel]" class="text-size-xs balck text-white  round-24 px-24 tm-swiper-dot-item  flex-center flex-shrink" :style="{height:'40rpx',minWidth:'60rpx'}">
					{{(nowIndex+1)+'/'+dataList.length}}
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	/**
	 * 图片轮播
	 * @description 很参数与原官方相同。
	 * @property {Number} width = [] 默认：0，轮播宽度，0为自己计算。
	 * @property {Number} height = [] 默认：0，轮播高度，0为自己计算。
	 * @property {Array} list = [] 默认：[]，图片列表，可以是string数组或者object数组。
	 * @property {String} rang-key = [] 默认：[]，图片列表object数组时，需要提供图片地址 的键值。
	 * @property {Boolean} inline = [] 默认：false，是否内联，方便一排放多个轮播组件。
	 * @property {Boolean} previmage = [] 默认：true,是否预览图片，点击图片时，放大预览。
	 * @property {Boolean} vertical = [] 默认：false,是否竖向滚动。
	 * @property {Boolean} circular = [] 默认：false,是否采用衔接滑动，即播放到末尾后重新回到开头
	 * @property {Boolean} autoplay = [] 默认：false,是否自动切换
	 * @property {Number} interval = [] 默认：3000,自动切换时间间隔
	 * @property {Number} duration = [] 默认：500,滑动动画时长
	 * @property {Boolean} indicator-dots = [] 默认：true,是否显示指示
	 * @property {String} color = [] 默认：primary,指示点的主题色。
	 * @property {Number} current = [] 默认：0,如果需要双向绑定请使用current.sync.
	 * @property {String} dot-model = [dot|number|rect|round] 默认：dot,指示点的类型。
	 * @property {String} dot-direction = [left|center|right] 默认：center,指示点的位置。
	 * @property {Number} round = [] 默认：0,圆角,单位rpx
	 * @property {Number} margin = [] 默认：0,单位rpx
	 * @property {Function} change 轮播切换时触发。参数返回当前播放位置。
	 * @example <tm-swiper :list="['https://picsum.photos/300?jv=3','https://picsum.photos/300?jv=3']" ></tm-swiper>
	 */
	export default {
		name:"tm-swiper",
		props:{
			width: {
				type: Number|String,
				default: 0
			},
			// 自定高度。
			height: {
				type: Number|String,
				default: 0
			},
			list:{
				type:Array,
				default:()=>{
					return []
				}
			},
			rangKey:{
				type:String,
				default:'src'
			},
			// 是否内联。
			inline:{
				type:Boolean,
				default:false
			},
			// 是否开启预览模式，即点击图片可以预览。
			previmage: {
				type: Boolean | String,
				default: true
			},
			vertical: false,
			circular: false,
			autoplay: false,
			interval:{
				type:Number,
				default:3000
			},
			duration:{
				type:Number,
				default:500
			},
			// 是否显示指示
			indicatorDots:false,
			//指示点的主题色。
			color:{
				type:String,
				default:'primary'
			},
			// 当前位置。
			current:{
				type:Number,
				default:0
			},
			// 指示点的类型。
			dotModel:{
				type:String,
				default:'dot',//dot|number|rect
			},
			// 指示点的位置 。
			dotDirection:{
				type:String,
				default:'center',//left|center|right
			},
			round:{
				type:Boolean|Number,
				default:0
			},
			margin:{
				type:Number,
				default:0
			},
			// 跟随主题色的改变而改变。
			fllowTheme:{
				type:Boolean|String,
				default:true
			}
		},
		watch:{
			current:function(newval){
				if(newval>=this.dataList.length){
					this.nowIndex = 0;
					return;
				}
				this.nowIndex = newval;
			}
		},
		computed:{
			color_tmeme:function(){
				if(this.$tm.vx.state().tmVuetify.color!==null&&this.$tm.vx.state().tmVuetify.color && this.fllowTheme){
					return this.$tm.vx.state().tmVuetify.color;
				}
				return this.color;
			},
			round_num:function(){
				if(typeof this.round === 'boolean') return 0;
				return this.round;
			},
			nowIndex:{
				get:function(){
					return this.dotIndex;
				},
				set:function(val){
					this.dotIndex = val;
					this.$emit("update:current",val)
					this.$emit('change',val)
				}
			},
			w_s:{
				get:function(){
					
					return this.w_w;
				},
				set:function(val){
					
					this.w_w = val;
				},
			},
			h_s:{
				get:function(){
					
					return this.h_h;
				},
				set:function(val){
					
					this.h_h = val;
				}
			},
			margin_px:function(){
				return this.margin*2;
			}
		},
		data() {
			return {
				w_w:0,
				h_h:0,
				dataList:[],
				dotIndex:0
			};
		},
		async mounted() {
			this.nowIndex = this.current;
			console.log(this.width,this.height);
			let w = this.width;
			if(String(w).indexOf('px')>-1 && typeof w =='string'){
				let p = parseInt(h)
				let sy = 750/uni.getSystemInfoSync().windowWidth;
				w = p * sy;
			}
			if(typeof w =='string'){
				w = parseInt(w)
			}
			this.w_w = w;
			
			let h = this.height;
			if(String(h).indexOf('px')>-1 && typeof h =='string'){
				let p = parseInt(h)
				let sy = 750/uni.getSystemInfoSync().windowWidth;
				h = p * sy;
			}
			if(typeof h =='string'){
				h = parseInt(h)
			}
			
			this.h_h = h;
			
			this.$nextTick(async function(){
				await this.chulidata()
			})
		},
		methods: {
			async chulidata() {
				let t= this;
				let tb = await this.$Querey(".tm-swiper",this).catch(ev => {})
				//console.log(uni.getSystemInfoSync());
				let sy = 750/uni.getSystemInfoSync().windowWidth;
				let upxw = tb[0].width * sy;
				let sw = this.w_s>0?this.w_s:(upxw>0?upxw:100);
				this.w_s = sw;
				let sh = this.h_s>0?this.h_s:(tb[0].height>0?tb[0].height:300);
				this.h_s = sh;
				let d = [];
				this.list.forEach(item=>{
					if(typeof item === 'string'){
						d.push({
							width:sw,
							height:sh,
							url:item,
							data:item
						})
					}else if(typeof item === 'object'){
						d.push({
							width:sw,
							height:sh,
							url:item[t.rangKey],
							data:item
						})
					}
					
				})
				this.dataList = d;
			},
			imgload(e,index){
				
			},
			change(event){
				this.nowIndex = event.detail.current;
				
			},
			itemClick(e){
				
				if(this.previmage){
					uni.previewImage({
						current: e.url,
						urls: [e.url]
					})
				}
				this.$emit('click',e)
			}
		},
	}
</script>
<style>
	
</style>
<style lang="scss" scoped>
	
.tm-swiper{
	position: relative;
	.actvieMarginDh{
		
		display: flex;
		justify-content: center;
		.actvieMarginDh-item{
			
			overflow: hidden;
			line-height: 0;
			
		}
		
	}

	.tm-swiper-dot{
		.tm-swiper-dot-item{
			width: 16upx;
			height: 16upx;
			border-radius: 50%;
			
			&.unactive{
				background-color: rgba(255,255,255,0.6);
			}
			&.number{
				width: 34upx;
				height: 34upx;
			}
			&.rect{
				width: 24upx;
				height: 6upx;
				border-radius: 0;
			}
			&.round{
				background-color: rgba(0,0,0,0.4);
			}
			
		}
		width: 100%;
		position: absolute;
		left: 0;
		display: flex;
		bottom: 20upx;
		&.center{
			display: flex;
			justify-content: center;
		}
		&.left{
			display: flex;
			justify-content: flex-start;
			padding-left: 20upx;
			width: calc(100% - 20upx);
		}
		&.right{
			display: flex;
			justify-content: flex-end;
			padding-right: 20upx;
			width: calc(100% - 20upx);
		}
	}
}
</style>
